<template>
    <div class="index clearafter">
        <module-head></module-head>
        <div class="content flex">
            <div class="w220">
                <menu-list></menu-list>
            </div>
            <div class="w980 flex_full">
                <div class="flex flex_between">
                  <p class="flex flex_vcenter pdb20">
                    <i class="titleTag"></i>
                    <span class="fRedBig">用户管理</span>
                  </p>
                    <button class="longBtn" @click="usermodal()">新增用户</button>
                    <div id="searchbyname">
                        <div class="col-md-3">
                            <input type="text" class="form-control" v-model="param.roleName" placeholder="请输入角色名">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" v-model="param.loginName" placeholder="请输入登录名">
                        </div>
                        <div class="col-md-3">
                            <input type="text" class="form-control" v-model="param.name" placeholder="请输入用户名">
                        </div>
                        <div class="col-md-2">
                            <button class="default blue" @click="getsearchlist">查询</button>
                        </div>
                    </div>
                </div>
                <div class="servicepeoplelist bg">
                    <table class="table table-hover table-striped">
                        <thead>
                            <tr>
                                <!--   <th>工号</th> -->
                                <th>登录名</th>
                                <th>用户名</th>
                                <th>邮箱</th>
                                <th>注册时间</th>
                                <th>状态</th>
                                <th>操作</th>
                            </tr>
                        </thead>
                        <tbody>
                            <tr v-for="item in userlist" track-by="$index">
                                <td>{{item.loginName}}</td>
                                <td>{{item.name}}</td>
                                <td>{{item.email}}</td>
                                <td>{{item.createDt}}</td>
                                <td>{{item.status==1?"有效":"无效"}}</td>
                                <td><span class="glyphicon glyphicon-pencil" @click="usermodal(item)"></span></td>
                            </tr>
                            <tr>
                                <td colspan="6">
                                    <div class="pull-left">
                                        <button class="secondBtn" @click="refresh">刷新</button>
                                    </div>
                                    <div class="pull-right">
                                        <!-- 分页组件: -->
                                        <boot-page v-ref:page :async="true" :lens="lenArr" :page-len="pageLen" :headersparam="headersparam" :param="param"></boot-page>
                                    </div>
                                </td>
                            </tr>
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
        <!-- 新增或者修改用户 -->
        <div class="modal fade" id="edituser" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
            <div class="modal-dialog">
                <div class="modal-content">
                    <div class="modal-header">
                        <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                        <h4 class="modal-title" id="myModalLabel">{{edittit}}</h4>
                    </div>
                    <form class="form-horizontal cb" role="form" id="selectmodule" v-on:submit.prevent="saveuser">
                        <div class="modal-body">
                            <div class="form-group">
                                <label class="col-md-3 control-label"><span class="start">*</span>登录名:</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control" required v-model="savedata.loginName" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">用户名:</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control"  v-model="savedata.name" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">邮箱:</label>
                                <div class="col-md-8">
                                    <input type="text" class="form-control"  v-model="savedata.email" />
                                </div>
                            </div>
                            <div class="form-group">
                                <label class="col-md-3 control-label">状态:</label>
                                <div class="col-md-8">
                                    <div class="radio">
                                        <label class="checkbox-inline">
                                            <input type="radio" name="sex" value="1" v-model="savedata.status">是
                                        </label>
                                        <label class="checkbox-inline">
                                            <input type="radio" name="sex" value="0" v-model="savedata.status">否
                                        </label>
                                    </div>
                                </div>
                            </div>
                            <div class="find-message">
                                <table class="table table-hover">
                                    <thead>
                                        <tr>
                                            <th>
                                                <input type="checkbox" name="allselected" v-model="isallselected" @change="allselected" />
                                            </th>
                                            </th>
                                            <th>角色ID</th>
                                            <th>角色名称</th>
                                            <th>备注说明</th>
                                        </tr>
                                    </thead>
                                    <tbody>
                                        <tr v-for="item in roleList">
                                            <td>
                                                <input type="checkbox" name="role" v-model="savedata.roleList" :value="item.id" />
                                            </td>
                                            <td>{{item.id}}</td>
                                            <td>{{item.name}}</td>
                                            <td>{{item.description}}</td>
                                        </tr>
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="modal-footer savebtn">
                            <button type="submit" class="default ok center">确认</button>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</template>
<script>
import 'assets/lib/bootstrap-3.3.2/css/bootstrap.min.css'
import 'assets/lib/bootstrap-3.3.2/js/bootstrap.min.js'
import 'assets/reset.css'
import Public from 'assets/public.js'
import moduleHead from 'components/module-head'
import menuList from 'components/menu-list'
import bootPage from 'components/BootPage.vue'
export default {
    data() {
            return {
                lenArr: [10, 20, 50], // 每页显示长度设置
                pageLen: 5, // 可显示的分页数
                headersparam: {
                    "X-Service-Id": "base.sysUserService",
                    "X-Service-Method": "findUser",
                },
                param: {
                    "roleName": "",
                    "loginName": "", //登录名
                    "name": "", //用户名
                    "pageNo": 1,
                    "pageSize": 10

                },
                userlist: [],
                edittit: "",
                savedata: {

                    "avatarFileId": 0,
                    "email": "",
                    "loginName": "",
                    "name": "",
                    "status": "1",
                    "roleList":[],
                },
                roleList: [],
                isallselected:false,


            }
        },
        computed: {},
        components: {
            moduleHead, menuList, bootPage
        },
        ready() {
            var that = this;
            // 获取角色列表
            $.when(Public.commonajax("base.roleService", "queryRoleByNameOrCode", `['']`))
                .done(function(res) {
                    if (res.code == 200) {
                        $.each(res.body, function(index, el) {
                            el.selected = false;
                        });
                        that.roleList = res.body;
                    }

                })
        },
        methods: {

            // 列表页面刷新按钮
            refresh() {
                    this.$refs.page.refresh()
                },
                //搜索
                getsearchlist() {
                    this.refresh();
                },
                // 修改新增用户弹框
                usermodal(item) {
                    var that = this;
                    $("#edituser").modal("show");
                    if (item) {
                        this.edittit = "修改用户";
                        $.when(Public.commonajax("base.sysUserService", "getById", ` ['${item.id}']`))
                            .done(function(res) {
                                if (res.code == 200) {
                                    that.savedata = res.body
                                }

                            })
                    } else {
                        this.edittit = "新增用户";
                        this.savedata = {

                            "avatarFileId": 0,
                            "email": "",
                            "loginName": "",
                            "name": "",
                            "status": "1",
                            "roleList": [],
                        }
                    }

                },
                // 修改新增用户保存
                saveuser() {
                    var that=this;
                      $.when(Public.commonajax("base.sysUserService", "saveUser", ` [${JSON.stringify(this.savedata)}]`))
                            .done(function(res) {
                                if (res.code == 200) {
                                     Public.ajaxPrompt("保存成功");
                                      $("#edituser").modal("hide");
                                       that.getsearchlist();
                                }else{
                                    Public.ajaxPrompt(res.msg);

                                }

                            })
                },
                allselected(){
                    var that=this;
                    this.savedata.roleList=[];
                    console.log( this.savedata.roleList);
                    if(this.isallselected){
                        $.each(this.roleList,function(index, el) {
                           that.savedata.roleList.push(el.id);
                        });
                    }
                }


        },
        events: {
            // 分页列表数据
            'data' (data) {
                this.userlist = data;
            },


        },
        watch: {


        },
}
</script>
<style scoped>
.servicepeoplelist {
    padding: 20px
}

.servicepeoplelist table th {
    text-align: center;
    line-height: 36px;
    height: 36px;
}

.servicepeoplelist table td {
    line-height: 40px;
    text-align: center;
}

.servicepeoplelist table tr td .glyphicon-pencil {
    display: inline-block;
    width: 30px;
    height: 30px;
    margin: 0 auto;
}

.servicepeoplelist table tr td .glyphicon-pencil:hover {
    color: #1dc499;
    cursor: pointer;
}

#searchbyname {
    width: 700px
}

.find-message table th {
    background: #1dc499;
    color: #fff;
    text-align: center;
    ;
}

.find-message table td {
    text-align: center;
}

.form-horizontal .radio {
    padding-top: 0
}
</style>
